<template>
	<div>


		<template

				v-if="mode==='D'"
		>

			<draggable
					v-model="targetList"
					class="drag-content"
					item-key="index"
					:sort="true"
					effect="dark"
					:group="{ name: 'dragFormList', pull: false, put: true }"

			>
				<template #item="{ element, index }">
					<div
							class="okcomponent border line " effect="dark"
							@click.stop="showConfigPanel(element.id)"

					>


						<el-icon v-if="element.type!='Empty'" class="deleteIcon" @click.stop="deleteForm(element.id)">
							<Delete/>
						</el-icon>
						<el-form-item :label="step2Object[element.id]?.name" :required="step2Object[element.id]?.required">

							<component style="width: 100%"
												 :is="getFormWidget(element.type)"
												 :id="element.id"
												 v-model:form="step2Object[element.id]"
							></component>
						</el-form-item>

					</div>
				</template>
			</draggable>
		</template>
		<template v-else>
			<el-card v-for="(item,index ) in form.props.value" :key="index" style="margin-bottom: 10px;">
				<template #header>
					<div class="card-header">
						<span>编号:{{ index + 1 }}</span>
						<el-button v-if="form.props.value.length>0&&form.perm!='R'" @click="deleteOneItem(index)" class="button"
											 :icon="$icon['Delete']" text></el-button>
					</div>
				</template>
				<form-render ref="formRenderRefLayout" :form-list="item"></form-render>

			</el-card>
			<div style="text-align: center;padding: 15px;">
				<el-button type="primary" @click="addOneItem"

									 :disabled="form.perm === 'R'||(form.props.max&&form.props.value.length>=form.props.max)"
									 text
				>添加明细
				</el-button>

			</div>
		</template>

	</div>
</template>

<script lang="ts" setup>

import draggable from "vuedraggable";


import {Delete} from "@element-plus/icons-vue";
import {computed, ref} from "vue";

import getFormName from "../utils/getFormWidget";
import FormRender from "./render/FormRender.vue";
import {useFlowStore} from "../workflow/stores/flow";
import {startFlow} from "@/api/flow";
import {cA} from "../../../../dist/assets/index-39cdaa7d";

const emit = defineEmits(["showPanel", "addLayoutOneItem", "deleteLayoutOneItem"])
let flowStore = useFlowStore();

var config = computed(() => {
	let step2 = flowStore.step2;
	let filterElement = step2.filter(res => res.id === props.id)[0];
	return filterElement;
});

const getFormWidget = (name: string) => {
	//写的时候，组件的起名一定要与dragList中的element名字一模一样，不然会映射不上
	return getFormName[name];
};


let targetList = computed({
	get: () => {
		let value = config.value?.props?.value;
		if (value?.length == 0) {
			return [{
				type: 'Empty',
				name: ''
			}]
		}
		return value;
	},
	set: (v) => {

		config.value.props.value = v.filter(res => res.type != 'Layout' && res.type != 'Empty')
	}
})


const addOneItem = () => {

	emit("addLayoutOneItem", props.form.id);
}

const deleteOneItem = (index) => {
	emit("deleteLayoutOneItem", props.form.id, index);

}


const showConfigPanel = (id) => {

	emit('showPanel', config.value.props.value.filter(res => res.id === id)[0])
};

const deleteForm = (id) => {


	config.value.props.value = (config.value.props.value.filter(res => res.id !== id));


	emit('showPanel', undefined)


};
var step2Object = computed(() => {
	var obj = {}

	targetList.value.forEach(res => obj[res.id] = res)

	return obj;
});

let props = defineProps({

	mode: {
		type: String,
		default: 'D'
	},

	id: {
		type: String,
		default: ''
	},

	index: {
		type: Number,
		default: undefined
	},


	form: {
		type: Object, default: () => {

		}
	}

});
const {proxy} = getCurrentInstance();


const getValidateRule = () => {

	var item = props.form;
	var itemProps = item.props

	var checkConfig = (rule: any, value: any, callback: any) => {


		if (item.required) {

			if (value.length == 0) {
				return callback(new Error("明细【" + item.name + "】的数量不能为0"))
			}

		}
		if (value.length == 0) {
			return callback()
		}
		if (itemProps.min && value.length < itemProps.min) {
			return callback(new Error("明细【" + item.name + "】的数量不能小于" + itemProps.min))

		}
		if (itemProps.max && value.length > itemProps.max) {
			return callback(new Error("明细【" + item.name + "】的数量不能大于" + itemProps.max))
		}


		var result = [];

		for (var fr of formRenderRefLayout.value) {
			fr.validate(function (valid) {

				result.push(valid)

			})
		}


		setTimeout(() => {
			if (result.indexOf(false) >= 0) {
				callback(new Error("明细【" + item.name + "】下的表单验证失败"))
			} else {
				callback();
			}
		}, 1000)


	}
	let ruleArray = [{
		validator: checkConfig, trigger: 'blur'
	}];
	if (item.required) {
		ruleArray.push(
				{required: true, message: '请填写' + item.name, trigger: 'change'}
		)
	}
	return ruleArray


}
const formRenderRefLayout = ref();


defineExpose({getValidateRule});

</script>
<style scoped lang="less">

.okcomponent {
	padding: 5px;
	border: 1px solid;
	border-radius: 5px;
	margin-bottom: 10px;

}

@center_width: 360px;

.drag-content {
	min-height: 100px; //建议是外层嵌套一层div，div固定高，此处再设为100%
	width: 100%;
	border-radius: 10px;
	display: block;
	padding: 10px 10px;

	//border: 1px solid ;

}

.deleteIcon {
	position: absolute;
	margin-left: calc(@center_width - 80px);
	z-index: 20;
}

.deleteIcon:hover {
	cursor: pointer;
	color: palevioletred;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.text {
	font-size: 14px;
}

.item {
	margin-bottom: 18px;
}

.box-card {
	width: 480px;
}
</style>
